<template>
  <el-container>
    <el-main>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>留言板</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 留言板主体 -->
      <el-card>
        <div class="textarea">
          <el-input
            type="textarea"
            placeholder="别光看啦,快来点评一下吧~~"
            :autosize="{ minRows: 4, maxRows: 10 }"
            v-model="form.content"
          ></el-input>
        </div>
        <el-row class="message">
          <el-col :span="12">
            <el-input
              size="small"
              placeholder="怎么称呼?"
              v-model="form.name"
            ></el-input>
          </el-col>
          <el-col :span="12">
            <el-input
              size="small"
              placeholder="http://您的主页"
              v-model="form.url"
            ></el-input>
          </el-col>
        </el-row>
        <el-button type="primary" @click="handleMessage">提交留言</el-button>
      </el-card>
      <el-card>
        <div class="Messagemain">
          <el-link :total="total">
            <i class="el-icon-chat-line-square"></i>
            | {{ total }} 评论
          </el-link>
        </div>
        <el-card class="Messagecontent" v-for="item in message" :key="item.id">
          <el-descriptions>
            <el-descriptions-item label="用户名">
              {{ item.name }}
            </el-descriptions-item>
            <el-descriptions-item label="时间">
              {{ item.create_time }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions>
            <el-descriptions-item label="留言">
              {{ item.content }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-card>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-main>
    <!-- 侧边栏 -->
    <el-aside>
      <el-card class="aside-user box-card">
        <div class="user"></div>
        <img src="../../assets/images/user.gif" class="userimg" />
        <div>{{ this.user.username }}</div>
        <div class="maxim">E-mail:{{ this.user.email }}</div>
        <div class="maxim">{{ this.user.personality }}</div>
      </el-card>
      <el-card class="type">
        <div slot="header" class="clearfix">
          <i class="el-icon-reading"></i>
          最新文章
        </div>
        <div v-for="item in articles" :key="item.id">
          <router-link :to="{ path: `/blogcontent`, query: { id: item.id } }">
            <div class="item">
              <i class="el-icon-document"></i>
              {{ item.title }}
            </div>
          </router-link>
        </div>
      </el-card>
    </el-aside>
  </el-container>
</template>

<script>
export default {
  name: 'messageboard',
  data() {
    return {
      form: {
        content: '',
        name: '',
        url: '',
      },
      articles: [
        { id: '1', title: '第一篇文章' },
        { id: '2', title: '第二篇文章' },
        { id: '3', title: '第三篇文章' },
      ],
      total: 6,
      message: [],
      page: 1,
      size: 6,
      user: {},
    }
  },
  created() {
    this.getMessage()
    this.getnew()
    this.handleGetUser()
  },
  methods: {
    getMessage() {
      this.$http
        .get(`/messages?page=${this.page}&size=${this.size}`)
        .then((res) => {
          this.total = res.data.result.total
          this.message = res.data.result.data
        })
    },
    getnew() {
      this.$http.get('/fontarticle/new').then((res) => {
        this.articles = res.data.result.data
        console.log(this.articles.id)
      })
    },
    handleMessage() {
      this.$http.post('/messages', this.form).then((res) => {
        // console.log(res)
        const { code, message } = res.data
        if (code != 0) {
          // 提示
          this.$message.error(message)
          return
        }
        this.$message({
          type: 'success',
          message: message,
          showClose: true,
          duration: 1000,
        })
        // 重新获取数据
        this.getMessage()
        // 清空表单
        this.form = ''
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getMessage()
    },
    handleGetUser() {
      this.$http.get('/fontuser/1').then((res) => {
        console.log(res)
        this.user = res.data.result
      })
    },
  },
}
</script>

<style lang="stylus">
 @import "../../assets/styles/home.styl"
 @import "../../assets/styles/blog.styl"
.el-main
 min-width:800px
.el-breadcrumb
 margin-bottom: 15px
 margin-top: 10px
.textarea
 margin-bottom: 10px
.message
 margin-bottom:10px
.Messagemain
 padding-bottom: 10px
 border-bottom: 1px solid #dcdfe6
.Messagecontent
 margin: 15px 0 0 0
 width: 100%
 padding-bottom: 10px
 border-bottom: 1px solid #dcdfe6
.pagination
  text-align: center
</style>
